<template>
	<div id="out5">
		<div id="top5">
			<a href="#/AlafenHert"><img id="imgTop5" src="../assets/img/duanhuowang/zuojiantou.png" alt=""/></a>
			<span>阿拉粉心得</span>
			<img id="imgTop6" src="../assets/img/duanhuowang/huizhuan.png" alt=""/>
		</div>
		<div class="backTt"></div>
		<div class="hertDD1">
			<p>
				<span class="man1"><img src="../assets/img/duanhuowang/huisetouxiang.png" alt=""/></span>
				昵称
				<span>2017-06-28</span>
			</p>
			<span>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
			<div class="tuP1"><img src="../assets/img/duanhuowang/chuncai.png" alt=""/></div>
		</div>
		<p>8小时前</p>
		<div class="middle2">
			<div class="middle1">
			<img src="../assets/img/duanhuowang/chuncai.png" alt=""/>
			<div>
				<p class="titt">焕彩璀璨花心唇彩4.8g</p>
				<p class="mid"><span><img src="../assets/img/duanhuowang/yingguoqi.png" alt=""/></span><img src="../assets/img/duanhuowang/huiji.png" alt=""/>海外直邮</p>
			    <p class="price2">￥166.06</p>
			</div>
		</div>
		</div>
		<div class="bottom2">
			<p class="tit1">用户评论（ 1 ）</p>
			<div>
				<p class="t"><span><img src="../assets/img/duanhuowang/huisetouxiang.png" alt=""/></span>昵称</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
			<p class="bottom3">
				<span><img src="../assets/img/duanhuowang/dianzan.png" alt=""/>点赞</span>
				<span class="line"></span>
				<span><img src="../assets/img/duanhuowang/pinglun.png" alt=""/>写评论</span>
				<span class="line"></span>
				<span><img src="../assets/img/duanhuowang/fengxiang.png" alt=""/>分享</span>
			</p>
		</div>
		<div class="jiaZa">加载更多</div>
	</div>
</template>

<script>
</script>

<style>
	#out5{
		background-color: #f2f2f2;
	}
	#top5 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		position: fixed;
		z-index: 10;
		align-items: center;
		text-align: center;
		justify-content: space-around;
	}
	#imgTop5 {
		width: 2.3rem;
		height: 3.8rem;
	}
	#imgTop6 {
		width: 3.6rem;
		height: 3.5rem;
	}
	#top5>span {
		width: 40.6rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.6rem;
		box-sizing: border-box;
		padding-right: 3rem;
	}
	.backTt{
		width: 100vw;
		height: 9.6rem;
	}
	.hertDD1{
		background: white;
		overflow: hidden;
		padding-top: 2rem;
	}
	.hertDD1>.tuP1{
		width: 26rem;
		height: 20rem;
		border: 0.1rem solid #CCCCCC;
		margin-left: 2rem;
	}
	.hertDD1>.tuP1>img{
		width: 6.2rem;
		height: 13.8rem;
	}
	.hertDD1 span{
		font-size: 2.4rem;
	}
	.hertDD1>p{
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 2.8rem;
	}
	.hertDD1>p>.man1{
		width: 8rem;
		height: 8rem;
		border-radius: 50%;
		border: 0.1rem solid #CCCCCC;
		text-align: center;
		box-sizing: border-box;
		padding-top: 1rem;
	}
	.hertDD1>p>.man1>img{
		width: 4.4rem;
		height: 5rem;
	}
	.hertDD1>p>span{
		width: 50rem;
		text-align: right;
	}
	.hertDD1>span{
		position: relative;
		float: left;
		padding: 2rem;
	}
	.hertDD1>div{
		margin-top: 11.9rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	#out5>p{
		font-size: 2.4rem;
		padding: 2rem 0;
		padding-left: 2rem;
		background: white;
	}
	.middle2{
		width: 99.8vw;
		background: white;
		border: 0.1rem solid white;
	}
	.middle1{
		margin: 2rem;
		width: 68rem;
		height: 16rem;
		border: solid 0.1rem #cccccc;
		background: white;
	}
	.middle1>img{
		width: 6.9rem;
		height: 15.3rem;
		margin: 0.3rem 6rem;
	}
	.middle1>div{
		float: right;
		width: 48.8rem;
		border-left: solid 0.1rem #cccccc;
		height: 16rem;
		box-sizing: border-box;
		font-size: 2.4rem;
		padding-left: 3.6rem;
	}
	.middle1>div>.titt{
		font-size: 2.8rem;
		padding-top: 1rem;
	}
	.middle1>div>.mid{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 3rem 0;
		width: 20rem;
	}
	.middle1>div>.mid>span{
		width: 3rem;
		height: 2rem;
		box-sizing: border-box;
		border: solid 0.1rem #cccccc;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.middle1>div>.mid>span>img{
		width: 1.4rem;
		height: 1rem;
	}
	.middle1>div>.price2{
		color: #e53e42;
	}
	.bottom2{
		background: white;
		margin-top: 2rem;
	}
	.bottom2>.tit1{
		font-size: 2.8rem;
		padding-left: 3.3rem;
		padding-top: 2.2rem;
		padding-bottom: 3rem;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	.bottom2>div>p{
		padding: 2rem;
		font-size: 2.4rem;
		color: #808080;
		padding-bottom: 4rem;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	.bottom2>div>.t{
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 2.8rem;
		width: 17rem;
		padding-bottom: 2rem;
		border-bottom: none;
	}
	.bottom2>div>.t>span{
		width: 8rem;
		height: 8rem;
		border-radius: 50%;
		border: 0.1rem solid #CCCCCC;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.bottom2>div>.t>span>img{
		width: 4.4rem;
		height: 5rem;
	}
	.bottom2>.bottom3{
		overflow: hidden;
	}
	.bottom2>.bottom3>span{
		float: left;
		width: 23.8rem;
		font-size: 2.4rem;
		height: 8rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		padding: 1rem 0;
		background: white;
	}
	.bottom2>.bottom3>span>img{
		width: 2.4rem;
		height: 2.4rem;
	}
	.bottom2>.bottom3>.line{
		width: 0.2rem;
		height: 4rem;
		background-color: #cccccc;
		margin-top: 2rem;
	}
	#out5>.jiaZa{
		text-align: center;
		height: 6.4rem;
		font-size: 1.8rem;
		line-height: 6.4rem;
	}
</style>